<template>
    <div style=";position: relative" class="animated fadeIn register">

        <!--            有验证码的高度是530px-->
        <el-card class="animated bounceIn"
            style="width: 400px;height: 300px;text-align: center;background-color: rgba(56,59,74,0.8);border: 0!important;">
            <h1 style="font-weight: 600;font-size: 18px;margin-top: 15px!important;color: #ffffff">POP-快速开发平台</h1>
            <!--            <h1 style="font-size: 18px;margin-top: 2px!important;">欢迎━(*｀∀´*)ノ亻!来到旅行社</h1>-->
            <div style="margin-top: 50px!important;">
                <el-form style="margin-top: 20px" size="medium" :model="form" :rules="rules" ref="loginForm"
                    label-width="70px">
                    <el-form-item label="用户名" prop="username">
                        <el-input style="background-color: #3F4457!important;color: #B7431E" placeholder="请输入用户名"
                            v-model="form.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <div style="text-align: center;margin-left: 30px">
                        <!--                        <slide-verify ref="slideblock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled"-->
                        <!--                                      @fail="onFail" @refresh="onRefresh" :slider-text="text" :imgs="imgs"-->
                        <!--                                      ></slide-verify>-->
                    </div>
                    <!--                    51,169,136-->
                    <!--                    background-color:#33A988 ;-->
                    <!--                    background-color: #33A988!-->
                    <el-button @click="handleLogin" type="primary" :loading="loading" class="loginbtn"
                        style="border: 0;width: 100%;margin-top: 10px">登录</el-button>
                    <!-- <el-button :loading="loading" class="loginbtn" style="border: 0;width: 100%;margin-top: 10px"
                        @click="handleLogintype=">登录
                    </el-button> -->
                </el-form>
            </div>

        </el-card>
        <div style="font-size: 12px;bottom: 0;color: #ffffff;position: absolute">
            <p style="text-align: center">
                <!--                版权所有 @jzs 中国建行平安保险 （集团） 股份有限公司 未经许可不得转载，违者必究-->

            </p>
            <p> Copyright @PING INSURAN (GROUP) COMPANY OF CHINA , LTD ALL Rights Reserved
            </p>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            return {

                loading: false,
                form: {
                    username: "admin",
                    password: "123456"
                },
                rules: {
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' },

                    ], password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },

                    ],
                }
            }
        },
        methods: {
            accuracy() {

            },

            handleLogin() {
                debugger
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$store
                            .dispatch("user/login", this.form)
                            .then(() => {
                                this.$router.push({
                                    path: this.redirect || "/",
                                    query: this.otherQuery,
                                });
                                this.loading = false;
                            })
                            .catch((err) => {
                                this.$message.error("登录失败");
                                this.loading = false;
                            });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            handleClick() {
                this.$refs.slideblock.reset();
                this.msg = ''
            },

            register(formRef) {
                const test = localStorage.getItem('token');
                if (test) {
                    this.$message.error('您已经登录了！')
                    return;
                }
                this.$refs[formRef].validate(async (valid) => { // 前端校验
                    if (valid) {
                        this.$message.success('test')
                        const { data: res } = await this.$http.post('user/login', this.form)
                        // console.log(res);
                        if (res.meta.status === 200) {
                            this.$message({
                                type: 'success',
                                message: '登录成功，可在首页自定义头像'
                            })
                            // let  jwt = require('jsonwebtoken');
                            console.log(res)
                            // let token =   jwt.decode(res.data)
                            // const token = jwtDecode(res.data);
                            // console.log(token);
                            // console.log(token.type)
                            localStorage.setItem('token', res.data.token);
                            localStorage.setItem('permissionList', JSON.stringify(res.data.permissionList));
                            localStorage.setItem('roleName', res.data.roleName);
                            // localStorage.setItem('type', token.type);
                            // console.log(11)
                            // console.log(JSON.stringify(res.data.permissionList))

                            this.$router.push('admin');
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.meta.msg
                            })
                        }

                    } else {
                        this.$message({
                            type: 'error',
                            message: '请检查！'
                        })
                        return false;
                    }
                }
                );
            }
        }
    }
</script>

<style scoped>
    /*/deep/.el-button loginbtn .el-button--primary{*/
    /*        background-color: rgba(51.169.136,0.6)!important;*/

    /*}*/
    /deep/ .el-button {
        /*margin: 0!important;*/
        /*background-color: pink!important;*/
        background-color: #33A988 !important;
        opacity: 0.9;
        /*background-color: rgba(51.169.136,0.6)!important;*/
        /*background-color: rgba(56);*/
    }

    /*/deep/.loginbtn{*/
    /*    !*51 169 136*!*/
    /*    background-color: rgba(51.169.136,0.6)!important;*/
    /*}*/
    /deep/ .el-form-item__label {
        color: #fbfbfb !important;

    }

    /deep/ .el-input__inner {
        background-color: #60626E !important;
        border: 0 !important;
        color: #fbfbfb !important;
    }

    .register {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        /*background-color: #E9ECEF;*/
        background-color: #F8F9FF;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /*background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57d270df67904.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635921877&t=6681be41f350bcd596184582466b9082");*/
        background-image: url("../../assets/img/login.jpg");
    }
</style>